<template>
    <view>
      <view class="section-title">{{ title }}</view>
      <view class="card-row">
        <view
          class="card"
          :class="color"
          v-for="(item, idx) in list"
          :key="idx"
        >{{ item }}</view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'Category1',
    props: {
      title: String,
      list: Array,
      color: String // yellow/blue/gray/green
    }
  }
  </script>
  
  <style scoped>
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin: 32rpx 0 16rpx 32rpx;
  }
  .card-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 24rpx 16rpx 24rpx;
    gap: 24rpx 24rpx;
  }
  .card {
    flex: 1 1 28%;
    min-width: 180rpx;
    max-width: 32%;
    padding: 32rpx 0;
    border-radius: 20rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    box-shadow: 0 4rpx 12rpx 0 rgba(36,104,242,0.04);
  }
  .card.yellow { background: #FFF3A3; color: #333; }
  .card.blue { background: #7B8DBA; color: #fff; }
  .card.gray { background: #E3E5E8; color: #333; }
  .card.green { background: #AEE6D2; color: #333; }
  </style>